<template>
  	<div >
  		<v-Header :item="headerMess"></v-Header>
  		<v-Content>
			<div class="call">
				<div class="call-left">
					<p class="call-top">客服热线<span>{{phone}}</span></p>
					<p class="call-bottom">服务时间09:00-17:00</p>
				</div>
				<!--<div class="call-right" @click="call">
					<img src="../../assets/icon_call.png"/>
					<span>立即拨打</span>
				</div>-->
			</div>
			<div class="box" v-for="(item,index) in problemList">
				<div class="title">{{item.name}}</div>
				<div  v-for="(ite,inde) in item.fqaList">
			        <v-ServerArrowList :item='ite' @toNext=''></v-ServerArrowList>
			    </div>
		   
			</div>
		</v-Content>
	    <router-link to='/problem' class="footer">
	    	没有解决问题?点此提问
	    </router-link>
  	</div>
</template>

<script>
	import ServerArrowList from '@/components/ServerArrowList'
	import my from '@/api/my/index'
	import Header from '@/components/Header'
	import { toast,isRealName,isBankNumber } from '@/util/index'
	import { MessageBox} from 'mint-ui'
	import Content from '@/components/ContentCenter'
	export default{
		data(){
			return{
				phone:"",
				headerMess:{
			        src:require("../../assets/nav_back.png"),
			        headerText: '客服中心',
			        right: ''
			    },
			    problemList:[],
				buyOne: {
			        text: '为什么我点买失败'	,
			        hidden:'由于行情波动只有全部成交后，才会结算该策略'
			    },
			    buyTwo: {
			        text: '为什么点卖时会部分成交，怎么结算？',
			        hidden:'由于行情波动过大，点卖时会造成部分成交，只有全部成交后，只有全部只有全部只有全部只有全部才会结算该策略'
			    },
			    castOne:{
			    	text: '点卖清算后资金何时返还账户余额？',
			    	hidden:'由于行情波动过大，点卖时会造成部分成交波动过大，点卖时会造成部分成交，只有全部成交后，才会结算该策略'
			    	
			    },
			    castTwo:{
			    	text: '为什么点卖时会部分成交，怎么结算？',
			    	hidden:'由于行情波动过大，点卖时会造成部分成交'
			    },
			    rechargeOne: {
			        text: '怎么充值？'	,
			        hidden:'由于行情波动过大，点卖时会造成部分成交，才会结算该策略'
			    },
			    rechargeTwo: {
			        text: '充值到账速度快吗？',
			        hidden:'由于行情波动过大，波动过大，点卖时会造成部分成交，点卖时会造成部分成交，只有全部成交后，才会结算该策略'
			        
			    },
			    rechargethree: {
			        text: '提款到账速度快吗？',
			        hidden:'由于行情波动过大，点卖时会造成部分成交，只有全部成交后，才会结算该策略波动过大，点卖时会造成部分成交，波动过大，点卖时会造成部分成交，'
			    }
			}
		},
		components:{
			'v-ServerArrowList':ServerArrowList,
			"v-Header":Header,
			"v-Content":Content
		},
		methods:{
			back(){
				this.$router.back(-1);
			},
			call(){
				MessageBox({
				  title: '',
				  message: '<p>'+this.data.phone+'</p>',
				  
				  //showCancelButton:true,
				  cancelButtonText:"取消"
				  
				  
				});
			}
		},
		mounted(){
	  		let data={
	  			plat:"mlj"
	  		}
	  		my.helpCenter(data).then((data) => {
				if (data.data.code == 200) {
					//console.log(data.data.data)
					this.problemList=data.data.data.categories;
					this.phone=data.data.data.phone;
				}else if(res.data.code==222){
		            this.$router.push({path:'/login'})
		        } else {
					toast(data.data.message)
				}
			})
	  	},
	  	 beforeRouteEnter(to,from,next){
	    document.querySelector('title').innerText='谋略家'
	      next()
	  }
	}
	
</script>

<style lang="less" scoped>
@import '../../less/config.less';
.header{
	padding:0 @p30;
	display: flex;
	justify-content:space-between;
	align-items: center;
	height:@hwrap;
	color:#fff;
	font-size:.48rem;
	background:#000;
	img,.img{
		width: @p30;
		height:  @p30;
	}
}
.call{
	color:#fff;
	display: flex;
	justify-content:space-between;
	align-items: center;
	padding: 0 @p30;
	height: 2.08rem;
	background-color:#141723;
	.call-left{
		.call-top{
			font-size: @f32;
			span{
				color: #FFDD25;
				margin-left: @f24;
			}
		}
		.call-bottom{
			font-size: @f26;
			color: @Color;
			margin: @f24 0 0 2rem;
		}
	}
	.call-right{
		width: 2.74666rem;
		height: .88rem;
		border-radius: 0.66666rem;
		background: #FFDD25;
		color: #8e4106;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: @p30;
		span{
			margin-left: .1rem;
		}
		img{
			width: 0.506rem;
			height: 0.506rem;
		}
	}
}
.box{
	
}
.title{
	padding-left:@p30;
	height: 0.90666rem;
	line-height: 0.90666rem;
	color: @Color;
}
.wrapOptional{
	border-top: @border 2px solid;
}
.footer{
	position: fixed;
	bottom: 0;
	width: 100%;
	display: inline-block;
	height: @hwrap;
	line-height: @hwrap;
	color: #FFFFFF;
	text-align: center;
	font-size: @f28;
	background: #141723;
}
</style>